<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script src="../libs/vue.js" type="text/javascript"></script>
</head>
<body>
	<div id='root'>
		<span>{{msg}}</span>
		
	</div>

	<p class="fz12">
		使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
		data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
		<div id="mount-point"></div>
	</p>
	
	<p class="fz12">
		Vue.nextTick( [callback, context] )
		// 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
	</p>
	
	<script>
		var Profile = Vue.extend({
			template: '<p>{{firstName}} {{lastName}} {{alias}}</p>',
			data: function(){
				return {
					firstName:'Profile',
					lastName:'组件',
					alias:'挂载'
				}
			}
		});
		// 创建 Profile 实例，并挂载到一个元素上。原DIV标签会被覆盖？
		new Profile().$mount('#mount-point');
		
		//Vue.nextTick
		//修改数据
		var vm = new Vue({
			el:'#root',
			data:{
				msg:'the root message'
			},
		});
		// Vue.nextTick(function(){
		// 	console.log('DOM更新了')
		// });
		// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
		Vue.nextTick().then(function () {
			vm.msg='change root message';
		   	console.log('DOM更新了')
		});
		
	</script>
</body>
	<style type="text/css">
		.fz12{font-size: 12px;}
		
	</style>
</html>